<template>
    <div>
      <h2>党建地点</h2>
      <el-row :gutter="20">
        <el-col v-for="location in locations" :key="location.id" :span="12"> <!-- 每行展示两个地点 -->
          <el-card class="location-card" :body-style="{ padding: '20px', display: 'flex', alignItems: 'center' }">
            <img :src="location.photo" class="location-photo" alt="Location Photo" />
            <div class="location-details">
              <h3>{{ location.name }}</h3>
              <p>位置: {{ location.address }}</p>
              <p>类型: {{ location.type }}</p>
              <p class="location-number">{{ location.number }} 人预约</p> <!-- 直接输出预约人数 -->
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue';
  
  const props = defineProps({
    locations: {
      type: Array,
      required: true
    }
  });
  </script>
  
  <style scoped>
  .location-card {
    margin-bottom: 20px; /* 卡片之间的间距 */
    display: flex;
    align-items: center; /* 纵向居中对齐内容 */
  }
  
  .location-photo {
    width: 250px; /* 图片固定宽度 */
    max-height: 80%; /* 设置图片最大高度为卡片高度的80% */
    height: auto; /* 自动调整高度以保持宽高比 */
    border-radius: 5px; /* 照片圆角 */
    margin-right: 20px; /* 右边间距 */
  }
  
  .location-details {
    flex-grow: 1; /* 使细节部分填充剩余空间 */
  }
  
  .location-number {
    margin-top: 10px; /* 上方间距 */
    font-weight: bold; /* 加粗 */
  }
  </style>
  